<template>
  <el-form-item v-if="config.valueType === 'input'" :label="config?.label" style="width: 100%">
    <el-input v-model="value" v-bind="$attrs" />
  </el-form-item>
  <el-form-item v-if="config.valueType === 'select'" :label="config?.label" style="width: 100%">
    <el-select v-model="value" v-bind="$attrs" style="width: 100%">
      <el-option
        v-for="item in config.options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </el-form-item>
  <el-form-item
    v-if="config.valueType === 'date-picker'"
    :label="config?.label"
    style="width: 100%"
  >
    <el-date-picker v-model="value" v-bind="$attrs" style="width: 100%" />
  </el-form-item>
  <el-form-item v-if="config.valueType === 'cascader'" :label="config?.label" style="width: 100%">
    <el-cascader v-model="value" v-bind="$attrs" style="width: 100%" />
  </el-form-item>
  <el-form-item
    v-if="config.valueType === 'time-select'"
    :label="config?.label"
    style="width: 100%"
  >
    <el-time-select v-model="value" v-bind="$attrs" style="width: 100%" />
  </el-form-item>
</template>
<script setup lang="ts">
import { computed } from 'vue';

type ConfigType = {
  modelValue?: any;
  config?: any;
};

const props = defineProps<ConfigType>();

const emits = defineEmits<{
  (e: 'update:modelValue', value: any): void;
}>();

const value = computed({
  get() {
    return props?.modelValue;
  },
  set(value) {
    emits('update:modelValue', value);
  }
});
</script>
<script lang="ts">
export default { inheritAttrs: false };
</script>
<style lang="less" scoped></style>
